<!-- server 分组相关配置 -->
<template>
    <div class="vue-box">
        <div class="c-card" v-if="state.model">
            <!-- 如果还有配置项没有初始化，就显示这个：提示初始化 -->
            <template v-if="state.dataList.length < state.names.length">
                <com-init-config ref="com-init-config" :groupName="state.groupName" :names="state.names" :data-list="state.dataList"></com-init-config>
            </template>
            <!-- 如果已经全部初始化了，则显示这个：开始UI操作配置 -->
            <template v-else>
                <!-- tab卡片 -->
                <el-tabs v-model="state.activeTab" class="s-tab">
                    <!-- ---------------------------------- 系统参数 ---------------------------------- -->
                    <el-tab-pane label="系统参数" name="tab1">
                        <el-form :inline="false" label-width="12em">
                            <!-- ---------- 一个配置项 --------- -->
                            <in-item name="预留信息：">
                                <el-input v-model="state.model.reserveInfo"></el-input>
                            </in-item>
                            <!-- ---------- 一个配置项 --------- -->
                            <in-item2 name="开放注册页面：">
                                <el-switch v-model="state.model.isOpenReg" active-value="true" inactive-value="false" />
                                <span class="c-remark" v-if="state.model.isOpenReg === 'true'">
                                    允许注册新账号
                                </span>
                                <span class="c-remark" v-else>
                                    不允许注册新账号（如您希望彻底关闭注册通道，请继续关闭 [ 未知手机号自动注册 ]、 [未知邮箱自动注册]  两个按钮）
                                </span>
                            </in-item2>
                            <!-- ---------- 一个配置项 --------- -->
                            <in-item2 name="开放找回密码：">
                                <el-switch v-model="state.model.isOpenForget" active-value="true" inactive-value="false" />
                                <span class="c-remark" v-if="state.model.isOpenForget === 'true'">
                                    允许遗忘密码的用户通过手机号重置密码 
                                </span>
                                <span class="c-remark" v-else>
                                    不允许用户通过手机号重置密码
                                </span>
                            </in-item2>
                            
                            <!-- ---------- 一个配置项 --------- -->
                            <in-item2 name="开启SSO内置登录页：">
                                <el-switch v-model="state.model.isOpenBuiltLoginPage" active-value="true" inactive-value="false" />
                                <span class="c-remark" v-if="state.model.isOpenBuiltLoginPage === 'true'">
                                    开启 sso-server 内置登录页，允许子应用跳转至 /sso/auth 页面进行统一认证登录
                                </span>
                                <span class="c-remark" v-else>
                                    关闭 sso-server 内置登录页，只允许子应用在平台中心进行统一认证登录
                                </span>
                            </in-item2>
                            <!-- ---------- 一个配置项 --------- -->
                            <in-item2 name="支持密码登录：">
                                <el-switch v-model="state.model.isOpenPasswordLogin" active-value="true" inactive-value="false" />
                                <span class="c-remark" v-if="state.model.isOpenPasswordLogin === 'true'">
                                    登录界面将显示密码登录入口，支持账号id / 昵称 / 手机号 / 邮箱 + 密码登录
                                </span>
                                <span class="c-remark" v-else>
                                    登录界面将不显示密码登录入口
                                </span>
                            </in-item2>
                            <!-- ---------- 一个配置项 --------- -->
                            <in-item2 name="支持手机登录：">
                                <el-switch v-model="state.model.isOpenPhoneLogin" active-value="true" inactive-value="false" />
                                <span class="c-remark" v-if="state.model.isOpenPhoneLogin === 'true'">
                                    登录界面将显示手机号登录入口，支持手机号 + 验证码形式登录
                                </span>
                                <span class="c-remark" v-else>
                                    登录界面将不显示手机号登录入口
                                </span>
                            </in-item2>
                            <!-- ---------- 一个配置项 --------- -->
                            <in-item2 name="支持邮箱登录：">
                                <el-switch v-model="state.model.isOpenEmailLogin" active-value="true" inactive-value="false" />
                                <span class="c-remark" v-if="state.model.isOpenEmailLogin === 'true'">
                                    登录界面将显示邮箱登录入口，支持邮箱 + 验证码形式登录
                                </span>
                                <span class="c-remark" v-else>
                                    登录界面将不显示邮箱登录入口
                                </span>
                            </in-item2>
                            <!-- ---------- 一个配置项 --------- -->
                            <in-item2 name="未知手机号自动注册：">
                                <el-switch v-model="state.model.isAllowPhoneRegister" active-value="true" inactive-value="false" />
                                <span class="c-remark" v-if="state.model.isAllowPhoneRegister === 'true'">
                                    未注册的手机号登录系统时，系统将为其自动注册账号并完成登录
                                </span>
                                <span class="c-remark" v-else>
                                    未注册的手机号将无法登录系统
                                </span>
                            </in-item2>
                            <!-- ---------- 一个配置项 --------- -->
                            <in-item2 name="未知邮箱自动注册：">
                                <el-switch v-model="state.model.isAllowEmailRegister" active-value="true" inactive-value="false" />
                                <span class="c-remark" v-if="state.model.isAllowEmailRegister === 'true'">
                                    未注册的邮箱号码登录系统时，系统将为其自动注册账号并完成登录
                                </span>
                                <span class="c-remark" v-else>
                                    未注册的邮箱号码将无法登录系统
                                </span>
                            </in-item2>
                            <!-- ---------- 一个配置项 --------- -->
                            <in-list name="新用户默认头像：" v-model="state.model.userDefaultAvatar" type="img-list" br></in-list>
                            <in-item name="" style="margin-top: -20px;" br>
                                <span style="color: #999;">系统将从以上图片中随机选择一张作为新用户头像</span>
                            </in-item>
                            
                        </el-form>
                    </el-tab-pane>

                    <!-- ---------------------------------- 其它配置 ---------------------------------- -->
                    <el-tab-pane label="其它配置" name="tab2">
                        <br>
                        <span>其它配置</span>
                    </el-tab-pane>

                </el-tabs>
                
                <!-- 确定按钮 -->
                <div style="position: absolute; bottom: 0px; width: calc(100% - 3em); line-height: 80px; background-color: #FFF;">
                    <hr style="height: 2px;">
                    <div class="c-item" style="padding-left: 10em;">
                        <el-button class="btn-13" type="primary" icon="el-icon-Check" @click="ok">保存修改</el-button>
                        <el-button class="btn-13" type="primary" plain icon="el-icon-RefreshRight" @click="f5">重置</el-button>
                    </div>
                </div>
                
            </template>
        </div>
    </div>
</template>

<script setup name="config-view-server">
import ComInitConfig from './com-init-config';
import InList from "../../sa-frame/com/in/in-list";
import {reactive} from "vue";
const { proxy } = getCurrentInstance();

// ------------------ 数据 ------------------
const state = reactive({
    activeTab: 'tab1',  // 当前显示的tab
    groupName:  "server",  // 当前所配置的配置分组名，可不填，写一个空串
    // 本页面要查询的配置集合
    names: [
        "reserveInfo",  // 预留信息  
        "isOpenReg",  // 是否开放注册页面
        "isOpenForget",  // 是否开放找回密码页面
        "isOpenBuiltLoginPage",  // 是否开放 SSO-Server 内置登录页
        "isOpenPasswordLogin",  // 是否打开密码登录功能
        "isOpenPhoneLogin",  // 是否打开手机号登录功能
        "isOpenEmailLogin",  // 是否打开邮箱登录功能  
        "isAllowPhoneRegister",  // 未注册手机号登录时是否自动注册账号  
        "isAllowEmailRegister",  // 未注册邮箱号码登录时是否自动注册账号  
        "userDefaultAvatar",  // 新用户默认头像  
    ],
    dataList: [], // 根据 names 查出来的配置项集合 
    model: null,  // 配置信息，JSON格式 
})

// ------------------ 函数 ------------------
// 加载数据
const f5 = function(){
    sa.ajax('/SpConfig/getListByNames', { names: state.names.join(',') }, function(res){
        // 配置项数组
        state.dataList = res.data;
        // 配置项 JSON 对象
        state.model = {};
        for (const item of res.data) {
            state.model[item.name] = item.value;
        }
    });
};
f5();

// 提交：确认修改配置 
const ok = function(){
    sa.ajax('/SpConfig/updateConfig', state.model, function(res){
        sa.ok2('保存成功');
    });
};

// 增加配置后的回调 
const addConfigCall = function (name, value, remarks) {
    proxy.$refs['com-init-config'].addConfigCall(name, value, remarks);
}

// 对外开放函数 
defineExpose({f5, addConfigCall})


</script>

<style scoped lang="scss">
.vue-box{height: 100%; overflow: hidden;}
.c-card{
    height: calc(100% - 4.5em);
    position: relative;
    :deep(.c-label){width: 10em;}
    :deep(.el-input){width: 500px;}
    :deep(.el-textarea){width: 500px;}
    :deep(.el-tabs__content){height: calc(100% - 130px); overflow: auto;}
    :deep(.el-form) {padding-top: 20px; padding-bottom: 50px;}
}
/* .vue-box{padding: 0px;} */
.logo-img{
    width: 35px;
    height: 35px;
    border-radius: 2px;
    vertical-align: middle;
    margin-right: 0.5em;
    cursor: pointer;
}
.s-tab{height: calc(100%); }

.c-remark{ margin-left: 10px; }

/* 让头像样式小一点 */
.vue-box :deep(*) {
    .image-box-2{width: 60px; height: 100px;}
    .image-box-2 img{width: 60px; height: 60px;}
    .image-box-2.up-img-box{height: 60px;}
    .image-box-2.up-img-box img{margin: 15px; width: 30px; height: 30px;}
}
</style>
